<template>
    <div id="container">
        <div class="searchBox">
            <el-select
                v-model="searchType"
                placeholder="请选择"
                style="width: 100px"
            >
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                >
                </el-option>
            </el-select>
            <el-input
                v-model="searchValue"
                placeholder="请输入内容"
                style="width: 300px"
            ></el-input>
            <el-button
                type="primary"
                icon="el-icon-search"
                @click="getTenants()"
                >查询</el-button
            >
        </div>
        <el-table :data="tenants" border style="width: 100%">
            <el-table-column prop="_id" label="编号"> </el-table-column>
            <el-table-column prop="account" label="账号"> </el-table-column>
            <el-table-column label="姓名" width="180">
                <template slot-scope="scope">
                    <el-popover trigger="hover" placement="top">
                        <p>详细信息：</p>
                        <p>编号: {{ scope.row._id }}</p>
                        <p>账号: {{ scope.row.account }}</p>
                        <p>联系方式: {{ scope.row.phone }}</p>
                        <p>姓名: {{ scope.row.name }}</p>
                        <p>身份证: {{ scope.row.IDCard }}</p>
                        <p>状态: {{ scope.row.state }}</p>
                        <p>信用值: {{ scope.row.credits }}</p>
                        <div slot="reference" class="name-wrapper">
                            <el-tag size="medium">{{ scope.row.name }}</el-tag>
                        </div>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column prop="state" label="状态">
                <template slot-scope="scope">
                    <span v-if="scope.row.state == '2'">已审核</span>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[2, 3, 4, 5]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
        >
        </el-pagination>
    </div>
</template>

<script>
import axios from "axios";
import { createNamespacedHelpers } from "vuex";
const {
    mapState: tenantsMapState,
    mapActions: tenantsMapActions,
    mapMutations: tenantsMapMutations,
} = createNamespacedHelpers("tenants");
export default {
    data() {
        return {
            currentPage1: 5,
            currentPage2: 5,
            currentPage3: 5,
            currentPage4: 4,
            searchType: "name",
            searchValue: "",
            options: [
                {
                    value: "name",
                    label: "姓名",
                },
                {
                    value: "account",
                    label: "账号",
                },
            ],
            value: "",
            input: "",
        };
    },
    mounted() {
        this.getTenants();
    },
    watch: {
        currentPage() {
            this.getTenants();
        },
        pageSize() {
            this.getTenants();
        },
        searchType(newSearchType) {
            this.changeSearchType(newSearchType);
        },
        searchValue(newSearchValue) {
            this.changeSearchValue(newSearchValue);
        },
    },
    computed: {
        ...tenantsMapState([
            "tenants",
            "pages",
            "currentPage",
            "total",
            "pageSize",
        ]),
        // filterTenants() {
        //     console.log(this.tenants);
        //     return this.tenants.filter((item) => item.state == 1);
        // },
    },
    methods: {
        ...tenantsMapActions(["getTenants"]),
        handleSizeChange(val) {
            this.changePageSize(val);
        },
        handleCurrentChange(val) {
            this.changeCurrentPage(val);
        },
        ...tenantsMapMutations([
            "firstPage",
            "lastPage",
            "prevPage",
            "nextPage",
            "changePageSize",
            "changeCurrentPage",
            "changeSearchType",
            "changeSearchValue",
        ]),
        //给身份证号打码：
        // function(str, frontLen, endLen) {
        //     //str：要进行隐藏的变量  frontLen: 前面需要保留几位    endLen: 后面需要保留几位
        //     var len = str.length - frontLen - endLen;
        //     var xing = "";
        //     for (var i = 0; i < len; i++) {
        //         xing += "*";
        //     }
        //     return (
        //         str.substring(0, frontLen) +
        //         xing +
        //         str.substring(str.length - endLen)
        //     );
        // },
    },
};
</script>
<style lang="scss">
.searchBox {
    margin-bottom: 20px;
    display: flex;
}
</style>